import React, { useState, useEffect } from 'react';
import { Sidebar, Toast } from 'react-vant';
import { Search } from 'react-vant';
import axios from '../../../axioslist/index'
import { ALLTYPELIST, ONTLIATDATA,OPCLITRY,CHILDRENDATALIST,PUSHLISTDATA, CHILIDATA } from '../../../types/index.d'
import '../../../api/index'
import { ProductCard, Tag, Button } from 'react-vant';
import { useDispatch, useSelector } from 'react-redux';
import { DropdownMenu } from 'react-vant';
import {useNavigate} from 'react-router-dom'
import { Space, Badge } from 'react-vant';
import { ChatO } from '@react-vant/icons';


export const option1 = [
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 },
  ];
export default function Classfig() {
    const [value, setValue] = useState('');
    const [active, setActive] = useState(0);
    const dispatch = useDispatch()
    const navigate = useNavigate()
    // useEffect({

    // })
    
    

    useEffect(() => {
        axios.get('/api/list').then(res => {
            dispatch({
                type: ONTLIATDATA,
                payload: res.data.list
            })
        })
    }, [])

    const listdata = useSelector((state: ALLTYPELIST) => {
        return state.list
    })
    const childatalist = useSelector((state: ALLTYPELIST) => {
        return state.chliteh
    })
    const dingon = (v: number) => {
        console.log(v, 1111);
        dispatch({
            type: CHILIDATA,
            payload: v
        })

    }
    const option = [
        { text: '水果', value: '水果' },
        { text: '蔬菜', value: '蔬菜' },
        { text: '雪糕', value: '雪糕' },
        { text: '服装', value: '服装' },
      ];

    const [value1,setValue1] = useState({})
    const setMenu = (v:any)=>{
        console.log(v);
        setValue1(v)
        dispatch({
            type:OPCLITRY,
            payload:v
        })
    }

    //这个push是错误的
    // const onhandlist = (index:any)=>{
    //     console.log(1111);
    //     dispatch({
    //         type:PUSHLISTDATA,
    //         payload:index
    //     })
    //     // navigate('/home/shopcar',{state:index})
    // }
    //这个push的正确的
    const onhandlist = (index:CHILDRENDATALIST)=>{
        console.log(1111);
        dispatch({
            type:PUSHLISTDATA, //这里是添加的校验
            payload:index
        }) 
        //跳转到购物车页面
        navigate('/home/shopcar',{state:index})
    }

    const contennum = useSelector((state:ALLTYPELIST)=>{
        return state.listpush.length
    })



    return (
        <div>


            <Search value={value} onChange={setValue} placeholder="一骑红尘妃子笑" />
            <Space className='demo-icon' gap={20}>
     
      <Badge content={contennum}>
        <ChatO />
      </Badge>
    </Space>
            <DropdownMenu value={value1} onChange={setMenu}>
                <DropdownMenu.Item placeholder='筛选' name="value" options={option} />
               
            </DropdownMenu>
            <Sidebar
                value={active}
                onChange={(v) => dingon(v)}
            >
                {
                    listdata && listdata.map((item, index) => {
                        return <Sidebar.Item key={index} contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.user}>
                            {
                                childatalist && childatalist.map((item, index) => {
                                    return <ProductCard
                                        key={index}
                                        num={item.num}
                                        price={item.price}
                                        desc={item.state1}
                                        title={item.user}
                                        thumb={item.img}
                                        footer={
                                            <>
                                              <Button size="mini" round plain onClick={()=>onhandlist(item)}>
                                                +
                                              </Button>
                                            </>
                                          }
                                    />
                                })
                            }
                        </Sidebar.Item>
                    })
                }

                {/* <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容2">
                    我是内容区2
                </Sidebar.Item>
                <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容3">
                    我是内容区3
                </Sidebar.Item> */}
            </Sidebar>



        </div >
    )
}
